<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统登录</title>
    <script src="js/vue.global.3.5.13.js"></script>
    <script src="js/axios.min.0.24.0.js"></script>
    <script src="js/index.full.js"></script>
    <script src="js/icons-vue.js"></script>
    <script src="js/zh-cn.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
    <el-container style="text-align: center">
        <el-header>
            <h1>在线考试系统登录</h1>
            <hr>
        </el-header>
        <el-main>
            <el-row style="height: 80px"></el-row>
            <el-row>
                <el-col :span="8" :offset="9">
                    <el-form :label-width="100" :rules="rules" :model="user" ref="loginForm">
                        <el-form-item label="登录账号：" prop="userName">
                            <el-input style="width: 300px" placeholder="请输入登录账号" v-model="user.userName">
                                <template #prefix>
                                    <el-icon><User/></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="登录密码：" prop="userPwd">
                            <el-input type="password" style="width: 300px" placeholder="请输入登录密码" v-model="user.userPwd">
                                <template #prefix>
                                    <el-icon><Lock/></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="登录身份：">
                            <el-radio-group v-model="user.flag">
                                <el-radio :label="1">老师</el-radio>
                                <el-radio :label="0">学生</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="" >
                            <el-button type="primary" @click="login">登录</el-button>
                            <el-button type="info" native-type="reset">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-main>
        <el-row style="height: 80px"></el-row>
        <el-footer style="text-align: center">
            <hr>
            版权所有：西安建筑科技大学华清学院
        </el-footer>
    </el-container>
</div>
<script>
    var option={
        data(){
            return {
                user:{
                    userName:undefined,
                    userPwd:undefined,
                    flag:0
                },
                rules:{
                    userName:[
                        {required:true,message:'账号不能为空',trigger:'blur'}
                    ],
                    userPwd:[
                        {required:true,message:'密码不能为空',trigger:'blur'}
                    ]
                }
            }
        },
        methods:{
            login(){
                let _this=this;
                //数据校验
                this.$refs.loginForm.validate(value=>{
                    if(value){
                        //发送数据到服务器
                        axios.post("user/login",_this.user).then(resp=>{
                            if(resp.data.code==200){
                                //判断身份
                                if(_this.user.flag==0){
                                    //学生登录成功跳转到在线考试页面
                                    sessionStorage.setItem("Student",JSON.stringify(resp.data.data));
                                    location.href="online.html";
                                }else{
                                    //老师登录成功跳转到后台系统首页
                                    sessionStorage.setItem("Teacher",JSON.stringify(resp.data.data));
                                    location.href="index.html";
                                }
                            }else{
                                //登录失败弹错误消息
                                _this.$alert(resp.data.msg);
                            }
                        })
                    }
                });
            }
        }
    }
    var app=Vue.createApp(option);
    for(const[key,component] of Object.entries(ElementPlusIconsVue)){
        app.component(key,component);
    }
    app.use(ElementPlus,{locale:ElementPlusLocaleZhCn});
    app.mount("#app");
</script>
</body>
</html>